<template>
    <div class="page-main" v-title data-title="数据分析报表平台">
        <home-nav :userData='userinfo' v-show="!screenFlag"></home-nav>
        <div class="container" :class="{'full-container': screenFlag}">            
            <div class="position">
                <div class="btn-line">
                    <a-button @click="goReportWork" type="primary" v-has="'reportCentent:reportList'">
                        <i class="iconfont icon-baobiaozhongxin"></i>
                        报表中心
                    </a-button>
                </div>
                <div class="header">
                    <span @click="changeTab('left')" :title="activeTabId === 1?'':'上一页'" :class="{'disabled': activeTabId === 1}">
                        <a-icon type="left" />
                    </span>
                    <h3>{{titleName}}</h3>
                    <span @click="changeTab('right')" :title="activeTabId === titleList.length?'':'下一页'" :class="{'disabled': activeTabId === titleList.length}">
                        <a-icon type="right" />
                    </span>                    
                </div>
                <span class="more-right" @click="toggleFullScreen" :title="!screenFlag ? '点击展开全屏': '点击取消全屏'">
                    <a-icon :type="!screenFlag ? 'fullscreen' : 'fullscreen-exit'" />
                </span> 
                <div class="dots">
                    <span v-for="(item,index) of titleList" :key="item.id" :class="{active: activeTabId === item.id}" @click="changeDots(item,index)"></span>
                </div>
            </div>                     
            <keep-alive>  
                <component :is="activeTab" :prolist="prolist" :proyear="proyear"></component>                
            </keep-alive>            
        </div>
        <div class="btn-left" @click="changeTab('left')" 
            :title="activeTabId === 1?'':'上一页'"
            :class="{'disabled': activeTabId === 1}">
            <a-icon type="left" />
        </div>
        <div class="btn-right" @click="changeTab('right')" 
            :title="activeTabId === titleList.length?'':'下一页'"
            :class="{'disabled': activeTabId === titleList.length}">
            <a-icon type="right" />
        </div>
    </div>
</template>
<script>
import { triggerWindowResizeEvent } from '@/utils/util'

export default {
    components: {
        HomeNav:() => import('@/components/layouts/HomeNav'),
        ProjectSummary1: () => import('@views/reportCenter/home/ProjectSummary1'),
        ProjectSummary2: () => import('@views/reportCenter/home/ProjectSummary2'),
        ProjectSummary3: () => import('@views/reportCenter/home/ProjectSummary3'),
    },
    data () {
        return {
            userinfo: {
                info: this.$store.getters.userInfo,
                module: 'ReportCenterHome',
            },
            titleList: [
                {name:'数据分析报表平台', id: 1},                                                                           
                {name:'数据分析报表平台', id: 2},
                {name:'数据分析报表平台', id: 3},
            ],
            titleName: '',
            activeTab: '',
            activeTabId: 0,
            screenFlag: false,
        }
    },
    created(){        
        // 设置当前年份
        const year = String(new Date().getFullYear())
        const lastNum = year.slice(year.length-1,year.length)  
        this.prolist = [{name:'全部', value: 'all'}]              
        for(var i = lastNum; i >= 0; i--){
            this.prolist.push({name: '202'+i,value: '202'+i})
        }
        this.proyear = year


        this.activeTabId = this.titleList[0].id
        this.getProjectName()
    },
    mounted () {
        triggerWindowResizeEvent()
    },
    methods: {
        changeTab(type){
            if(type === 'left'){
                if(this.activeTabId === 1) return
                this.activeTabId -= 1  
                this.getProjectName()          
            }else{
                if(this.activeTabId === this.titleList.length) return
                this.activeTabId += 1
                this.getProjectName()    
            }            
        },
        getProjectName(){
            this.titleName = this.titleList[this.activeTabId-1].name
            this.activeTab = `ProjectSummary${this.activeTabId}` 
            triggerWindowResizeEvent()
        },
        goReportWork(){
            const urlJump = this.$router.resolve({path: '/reportWork' })
            window.open(urlJump.href, '_blank')   
        },
        changeDots(item, index){            
            if(item.id == this.activeTabId) return            
            this.activeTabId = item.id
            this.getProjectName()
        },
        /**
         * 全屏
         */
        toggleFullScreen(){
            this.screenFlag = !this.screenFlag
        },
    }
}
</script>
<style lang="less" scoped>
@import 'home.less';
.header{&:extend(.flex-center);
    >span{background-color: #445488;width:27px;height:27px;border-radius: 100%;cursor: pointer;
        &:extend(.flex-center); 
        i{opacity: 0.77; margin-top: 1px;font-size: 12px;}        
    }
    h3{display: inline-block;font-size: 24px;color: #fff;margin: 0 22px;}
}
.btn-line{position: absolute;top: 4px;left: 0;
    i{margin-right: 5px;}
}
.more-right{position: absolute;top: 7px;right: 0;cursor: pointer;
    i{font-size: 23px;color: #98baff;}
    &:hover i{color: #6d93e1;}
}
.header >span, .btn-left, .btn-right{transition: background-color .2s;
    i{color: #ffffff;}
    &:not(.disabled):hover{background-color: #253c6e;
        i{opacity: 1;}
    }
    &.disabled{cursor: not-allowed;background-color: #9699a3;}
}
.btn-left, .btn-right{cursor: pointer;display: inline-block;position: fixed;top: 45%;height: 60px;line-height: 60px;background-color: #5b73aa;opacity: 0.8;text-align: center;width: 20px;
    i{font-size: 14px;vertical-align: middle;}
}
.dots{display: inline-block;width:100%;text-align:center;margin-top:6px;margin-bottom:-14px;
    >span{width: 6px;height: 6px;border-radius: 100%;display: inline-block;background-color: #445488;cursor: pointer;margin:3px;
        &:hover{background-color: #253c6e;}
        &.active{background-color: #cfced6;}
    }
}
.position{position: relative;margin-left: 0;}
.btn-left{left: 0;border-radius: 0px 12px 12px 0px;}
.btn-right{right: 0;border-radius: 12px 0px 0px 12px;}
</style>